<template>
  <div class="mod-user">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <div class="tabular_data">
            <div class="header_title">
              <span>账户列表</span>
            </div>
            <div class="add_user">
              <el-button
                @click="adduser()"
                type="primary"
                size="mini"
                icon="el-icon-plus"
                v-if="isauth('account_add')"
              >新增账户</el-button>
              <el-tooltip
                v-if="isSchool() && isauth('account_distribute')"
                content="引入当前代理商的其他账户来管理本学校"
                placement="bottom"
              >
                <el-button type="primary" @click="addsubmit()" size="mini" icon="el-icon-plus">引入账户</el-button>
              </el-tooltip>
            </div>
            <div class="user_table">
              <el-table
                v-loading="dataListLoading"
                :data="tableData"
                style="width: 100%"
                :header-cell-style="headFirst"
                :cell-style="(res) => headFirst_col(res, [])"
              >
                <el-table-column prop="loginName" label="登录名" width="110px"></el-table-column>
                <el-table-column prop="userName" label="用户名称"></el-table-column>
                <el-table-column prop="roleName" label="角色"></el-table-column>
                <el-table-column prop="userType" label="类型">
                  <template slot-scope="scope">
                    <div>{{scope.row.userType | userTypeFilter }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="isDelete" label="账号状态" width="160px">
                  <template slot-scope="scope">
                    <div v-if="!isauth('account_deactivate')">{{scope.row.isDelete? '已启用':"未启用"}}</div>
                    <el-switch
                      v-model="scope.row.isDelete"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="启用"
                      inactive-text="停用"
                      validate-event
                      @click.native="handleChangeState(scope.row)"
                      disabled
                      v-if="isauth('account_deactivate')"
                    ></el-switch>
                  </template>
                </el-table-column>
                <el-table-column
                  width="160px"
                  label="操作"
                  v-if="isauth('account_update') || isauth('account_reset_pwd')"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="addOrUpdateHandle(scope.row)"
                      v-if="isauth('account_update')"
                    >修改</el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="deleteHandle(scope.row)"
                      v-if="isauth('account_reset_pwd')"
                    >重置密码</el-button>
                    <el-button
                      v-if="isSchool()"
                      type="text"
                      size="mini"
                      style="color:red"
                      @click="removeUser(scope.row)"
                    >移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangepage"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="recordCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="0">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <!-- 新增弹窗 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
      :userGuid="userGuid"
      :userName="userName"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './user-add-or-update'

export default {
  data() {
    return {
      dataForm: {
        userName: ''
      },
      dataList: [],
      pageSize: 20,
      pageNum: 1,
      totalPage: 0,
      recordCount: 0,
      currentPage: 1,
      dataListLoading: false,
      dataListSelections: [],
      searchInfo: {},
      userGuid: '',
      userName: '',
      tableData: [],
      addOrUpdateVisible: false,
      //账户分配数据
      dialogTableVisible: false,
      tableData1: [],
      currentPage1: [],
      pageSize1: 10,
      recordCount1: 0,
      searchInfo1: {},
      rolelist: []
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    this.userName = sessionStorage.getItem('username')
    this.unitGuid = this.$store.state.user.changeschoolid
    this.unitType = this.$store.state.user.unitType
  },
  mounted() {
    this.getDataList()
    this.getrole()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    isSchool() {
      // 是否是普通单位
      if (this.isOrdinaryUnit(this.unitType)) {
        return true
      }
      return false
    },
    //状态停用弹出
    handleChangeState(row) {
      // console.log(row)
      if (row.isDelete == true) {
        this.$confirm('此操作将停用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.disableuser(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
      if (row.isDelete == false) {
        this.$confirm('此操作将启用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.enable(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
      }
      return
    },
    //启用接口
    enable(row) {
      this.$http({
        url: this.$http.adornUrl('/sys/str-system-user'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            operationGuid: this.userGuid,
            userGuid: row.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getDataList()
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    //停用接口
    disableuser(row) {
      this.$http({
        url: this.$http.adornUrl('/sys/del-system-user'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            operationGuid: this.userGuid,
            userGuid: row.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getDataList()
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    //获取新增多选数据
    getrole() {
      this.$http({
        url: this.$http.adornUrl('/sys/get-role-select'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.userGuid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          let rolelistdata = data.messageContent
          if (this.rolelist.length == 0) {
            for (var i = 0; i < rolelistdata.length; i++) {
              var itemObj = {
                label: rolelistdata[i].name,
                value: rolelistdata[i].pkRoleId
              }
              this.rolelist.push(itemObj)
            }
          }
          return
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    },
    //分页数据
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/get-system-user-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: {
              unitGuid: this.unitGuid
              // userName:this.userName
            }
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        this.dataListLoading = false
        if (data.messageCode === 200) {
          this.tableData = data.messageContent.data
          if (this.tableData.length !== 0) {
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].isDelete === 0) {
                this.tableData[i].isDelete = true
              }
              if (this.tableData[i].isDelete === 1) {
                this.tableData[i].isDelete = false
              }
            }
          }
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          return
        } else {
          this.$message.error('遇到未错误')
          return
        }
      })
    },
    adduser() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinit()
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      //  console.log(this.row)
      this.$nextTick(() => {
        this.$refs.addOrUpdate.eidtinit(row)
      })
    },
    deleteHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.passwordit(row)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getDataList()
    },
    //账户分配
    addsubmit() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinitfenpei()
      })
    },
    removeUser(row) {
      this.$confirm('移除后该账户将无法管理本单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleuser(row.userGuid)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    deleuser(row) {
      this.$http({
        url: this.$http.adornUrl('/unit/delete-unit-agent'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: row
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.$message({
            message: '移除成功',
            type: 'success'
          })
          this.getDataList()
        } else {
          this.$message.error(data.errorMessage)
          return
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-switch.is-disabled {
  opacity: 1;
}
/deep/.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer !important;
}

.mod-user {
  padding: 10px;
  .bg-purple {
    // height: 600px;
    height: 100%;
    // background: #e5e9f2;
    .tabular_data {
      background-color: #fff;
      width: 100%;
      height: 100%;
      .header_title {
        // text-indent: 22px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e5e9f2;
        color: #909399;
      }
      .add_user {
        border-bottom: 1px solid #e5e9f2;
        // text-indent: 20px;
        height: 40px;
        line-height: 40px;
      }
      .user_table {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  }
  .bg-purple-light {
    height: 600px;
    // background: #e5e9f2;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>